<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>任务一：零基础HTML编码</title>
    <style>
        /**{*/
            /*margin: 0px;*/
            /*padding: 0px;*/
        /*}*/
    </style>
</head>
<body>
    <h1>网站一级标题</h1>
    <ul>
        <li><a href="#">导航链接一</a></li>
        <li><a href="#">导航链接一</a></li>
        <li><a href="#">导航链接一</a></li>
        <li><a href="#">导航链接一</a></li>
    </ul>
    <h2>文章一级标题</h2>
    <h2>文章二级标题</h2>
    <p>文章作者&nbsp;文章发表时间</p>
    <p>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
        这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
        这是一个很长很长的段落，<br/>换行了<br/>这是一个很长很长的段落，这是一个很长很长的段落，
        这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了<br/>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
        这是一个很长很长的段落，
        <a href="http://ife.baidu.com/">这里有一个链接链接到http://ife.baidu.com/</a>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
        这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落。
    </p>
    <img src="https://www.baidu.com/img/bd_logo1.png" alt="百度logo" title="百度logo">
    <p>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
        这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
        这是一个很长很长的段落，<br/>换行了<br/>这是一个很长很长的段落，这是一个很长很长的段落，
        这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了<br/>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
        这是一个很长很长的段落，
        <a href="http://ife.baidu.com/">这里有一个链接链接到http://ife.baidu.com/</a>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
        这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落。
    </p>
    <h2>另一篇文章的一级标题</h2>
    <h2>文章二级标题</h2>
    <p>文章作者&nbsp;文章发表时间</p>
    <p>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
        这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
        这是一个很长很长的段落，<br/>换行了<br/>这是一个很长很长的段落，这是一个很长很长的段落，
        这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了<br/>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
        这是一个很长很长的段落，
        <a href="http://ife.baidu.com/">这里有一个链接链接到http://ife.baidu.com/</a>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
        这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落。
    </p>
    <img src="https://www.baidu.com/img/bd_logo1.png" alt="百度logo" title="百度logo">
    <ul>
        <li>列表项目一</li>
        <li>列表项目二</li>
        <li>列表项目三</li>
    </ul>
    <h2>图片</h2>
    <p>好看的图片</p>
    <img src="https://www.baidu.com/img/bd_logo1.png" alt="百度logo" title="百度logo">
    <p>好看的图片</p>
    <img src="https://www.baidu.com/img/bd_logo1.png" alt="百度logo" title="百度logo">
    <p>好看的图片</p>
    <img src="https://www.baidu.com/img/bd_logo1.png" alt="百度logo" title="百度logo">
    <p>好看的图片</p>
    <img src="https://www.baidu.com/img/bd_logo1.png" alt="百度logo" title="百度logo">
    <p>好看的图片</p>
    <img src="https://www.baidu.com/img/bd_logo1.png" alt="百度logo" title="百度logo">
    <p>好看的图片</p>
    <img src="https://www.baidu.com/img/bd_logo1.png" alt="百度logo" title="百度logo">
    <p>好看的图片</p>
    <img src="https://www.baidu.com/img/bd_logo1.png" alt="百度logo" title="百度logo">
    <p>好看的图片</p>
    <img src="https://www.baidu.com/img/bd_logo1.png" alt="百度logo" title="百度logo">
    <p>好看的图片</p>
    <img src="https://www.baidu.com/img/bd_logo1.png" alt="百度logo" title="百度logo">
    <p>好看的图片</p>
    <img src="https://www.baidu.com/img/bd_logo1.png" alt="百度logo" title="百度logo">
    <h2>最后一篇文章一级标题</h2>
    <h2>文章二级标题</h2>
    <p>文章作者&nbsp;文章发表时间</p>
    <ol>
        <li>排名1</li>
        <li>排名2</li>
        <li>排名3</li>
    </ol>
    <span>下面是一个表格，给表格加了一个border="1"好让你看出来是一个表格</span>
    <table border="1">
        <tr align="left">
            <th>表头</th>
            <th>表头</th>
            <th>表头</th>
        </tr>
        <tr>
            <td>表内容单元格</td>
            <td>表内容单元格</td>
            <td><a href="#">操作</a></td>
        </tr>
        <tr>
            <td>表内容单元格</td>
            <td>表内容单元格</td>
            <td><a href="#">操作</a></td>
        </tr>
        <tr>
            <td>表内容单元格</td>
            <td>表内容单元格</td>
            <td><a href="#">操作</a></td>
        </tr>
        <tr>
            <td>表内容单元格</td>
            <td>表内容单元格</td>
            <td><a href="#">操作</a></td>
        </tr>
        <tr>
            <td>总计</td>
            <td colspan="2">1000</td>
        </tr>
    </table>
    <h2>这里以后是一个侧栏，这是侧栏的标题</h2>
    <h2>侧栏注册窗口地址</h2>
    <form action="#">
        <label for="user">请输入邮箱地址：<input type="text" id="user"></label>
        <p>邮箱地址请安要求格式输入</p>
        <label for="psw">请输入密码：<input type="password" id="psw"></label>
        <label for="psw_r">请重复输入密码：<input type="password" id="psw_r"></label>
        <p>密码请为6-16位数字</p>
        <span>性别：
        <input type="radio" name="sex" checked="checked"><span>男</span>
        <input type="radio" name="sex"><span>女</span>
    </span>

        <select name="city" id="">
            <option value="北京" selected="selected">北京</option>
            <option value="上海">上海</option>
            <option value="广州">广州</option>
            <option value="深圳">深圳</option>
        </select>

        <span>
        爱好：<input type="checkbox"><span>运动</span>
             <input type="checkbox"><span>艺术</span>
             <input type="checkbox"><span>科学</span>
    </span>
        <span>
        个人描述：<textarea name="describe" id="" cols="20" rows="2">这是一个多行文字请输出你的个人描述</textarea>
        <input type="submit" value="确认提交">
    </span>
    </form>
    <p>版权所有&copy;</p>
</body>
</html>